<template>
  <view class="guide" @touchmove.stop.prevent="moveHandle" v-if="showGuide">
    <view :style="getStyle" class="guide-box" catchtouchmove="true">
      <view class="tips" :style="{ left: guideInfo.tipStyle.left, top: guideInfo.tipStyle.top }">
        <view class="text">{{ guideInfo.tips }}</view>
        <view class="next">
          <text @click="next">{{ guideInfo.next }}</text>
        </view>
      </view>
      <view class="arrow" :style="{ top: guideInfo.tipStyle.atop }"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      index: 0, // 当前展示的索引
      showGuide: true, // 是否显示引导
    };
  },
  props: {
    guideList: {
      style: Array,
      default: [],
    },
  },
  computed: {
    guideInfo() {
      return this.guideList[this.index];
    },
    getStyle() {
      const { width, height, left, top, style } = this.guideInfo;
      return {
        width: 120 + "rpx",
        height: 120 + "rpx",
        left: left + "px",
        top: top + "px",
        ...style,
        boxShadow: "rgb(33 33 33 / 80%) 0px 0px 0px 0px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px",
      };
    },
  },
  mounted() {
    this.getDomInfo();
    // const guide = uni.getStorageSync("guide_key");
    // if (!guide) {
    //   this.getDomInfo();
    // } else {
    //   this.showGuide = false;
    // }
  },
  methods: {
    getDomInfo() {
      const { el } = this.guideInfo;
      const query = uni.createSelectorQuery().in(this.$root);
      setTimeout(() => {
        query
          .select(el)
          .boundingClientRect((data) => {
            if (data) {
              const index = this.index;
              this.guideList.splice(index, 1, {
                ...this.guideList[index],
                left: data.left,
                top: data.top,
                width: data.width,
                height: data.height,
              });
            }
          })
          .exec();
      }, 10);
    },
    next() {
      if (this.index === this.guideList.length - 1) {
        this.showGuide = false;
        uni.setStorageSync("guide_key", "true");
        this.$emit("curIndex", -1);
      } else {
        this.index += 1;
        this.getDomInfo();
        this.$emit("curIndex", this.index);
      }
    },
    moveHandle() {
      return false;
    },
  },
};
</script>

<style lang="scss" scoped>
.guide {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  z-index: 1000;
  .guide-box {
    position: fixed;
    z-index: 100;
    transition: all 0.2s;
    &::before {
      content: "";
      height: calc(100% + 10px);
      width: calc(100% + 10px);
      border: 1px dashed #fff;
      border-radius: 12rpx;
      position: absolute;
      top: -12rpx;
      left: -12rpx;
    }
    .arrow {
      height: 20rpx;
      width: 20rpx;
      background: #2979ff;
      position: absolute;
      top: 144rpx;
      left: 50%;
      transform: rotate(45deg);
    }
    .tips {
      background: #2979ff;
      box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.1);
      color: #fff;
      position: absolute;
      top: 152rpx;
      left: -50%;
      padding: 15rpx 20rpx;
      font-size: 28rpx;
      border-radius: 12rpx;
      .text {
        white-space: nowrap;
      }
      .next {
        text-align: right;
        padding-right: 0rpx;
        margin-top: 10rpx;
      }
    }
  }
}
</style>
